<template>
    <a-row :gutter="gutter" class="search-form">
        <template v-for="item in searchForm" :key="item.field">
            <SearchItem v-if="!item.hidden" :label="item.label" :align="item.align">
                <template v-if="item.control === 'input'">
                    <a-input></a-input>
                </template>
                <template v-if="item.control === 'select'">
                    <a-select style="width: 100%;"></a-select>
                </template>
            </SearchItem>
        </template>
        <SearchItem :span="!isToggle ? buttonSpan[0] : buttonSpan[1]">
            <div class="full-right">
                <a-button>搜索</a-button>
                <a-button>重置</a-button>
                <button type="button" @click="toggle">动作{{ isToggle }}</button>
            </div>
        </SearchItem>
    </a-row>
</template>
<script setup>
import SearchItem from "./item.vue"
import { watch, ref, provide } from "vue"

const props = defineProps({
    list: {
        type: Array,
        default: ()  => ([])
    },
    gutter: {
        type: Number,
        default: 16
    },
    span: {
        type: Number,
        default: 24
    },
    buttonSpan: {
        type: Array,
        default: ()  => ([])
    },
    
})
const searchForm = ref([])
const isToggle = ref(false)

/**
 * 切换收起、展开
 */
 const toggle = () => {
    isToggle.value = !isToggle.value
    searchForm.value.forEach(item => {
        if(item.isToggle) {
            item.hidden = !item.hidden
        }
    })
}
// 注入数据
provide('search', props)

watch(() => props.list, (val) => {
    searchForm.value = val
}, {
    immediate: true // 启用初始化监听
})
</script>
<style lang="scss" scoped>
.search-form {
    row-gap: 16px;
}
</style>